import React, { PureComponent } from "react"
import styles from './statistics.less'
import PropTypes from 'prop-types'
import { withRouter } from "react-router"
import { parseHour } from '@/utils'


function formatNum(num, demical=1){
  let result = num >= 10000 ? `${(num/10000).toFixed(demical)}` : (num*1).toFixed(demical);
  return result ? `${result}`.split('.') : ["0"];
}
class Statistics extends PureComponent {

  render(){
    const { statistics, times, nolink } = this.props;
    const workTime = parseHour(statistics.workTime)
    const tempPumpDuration = parseHour(statistics.pumpDuration);
    
    const totalOilNum = formatNum(statistics.totalOilNum);
    const pumpDuration= formatNum(tempPumpDuration);
    const totalQuantityNum = formatNum(statistics.totalQuantityNum);
    const oilPerQuantity = formatNum(statistics.oilPerQuantity,2);
    return (
      <div>
        <div className={styles.inform_top}>
          <div onClick={()=>{ if(nolink) return false; this.props.history.push('/totaloil', { worktime: times }) }} className={styles.item}>
            <div className={styles.item_value}>{totalOilNum[0]!=='NaN'?totalOilNum[0]:0}{totalOilNum[1] && '.'}<span className={styles.standard}>{totalOilNum[1]}{statistics.totalOilNum>=10000 && '万'}L</span></div>
            <div className={styles.item_name}>油耗</div>
          </div>
          <div onClick={()=>{ if(nolink) return false; this.props.history.push('/worktime', { worktime: times }) }} className={styles.item}>
            <div className={styles.item_value}>{pumpDuration[0]!=='NaN'?pumpDuration[0]:0}{pumpDuration[1] && '.'}<span className={styles.standard}>{pumpDuration[1]}{tempPumpDuration>=10000 && '万'}H</span></div>
            <div className={styles.item_name}>泵送计时</div>
          </div>
          <div onClick={()=>{ if(nolink) return false; this.props.history.push('/totalquanitity', { worktime: times }) }} className={styles.item}>
            <div className={styles.item_value}>{totalQuantityNum[0]!=='NaN'?totalQuantityNum[0]:0}{totalQuantityNum[1] && '.'}<span className={styles.standard}>{totalQuantityNum[1]}{statistics.totalQuantityNum>=10000 && '万'}M³</span></div>
            <div className={styles.item_name}>泵送总量</div>
          </div>
        </div>
        <img className={styles.inform_solid} src={require('../assets/img/statiscs_solid.png')} />
        <div className={styles.inform_bottom}>
          <div className={styles.item}>
            <div className={styles.item_value} style={{ color: statistics.markers && statistics.markers.workTime ? '#F96F4E' : '#000' }}>{workTime>=10000 ? (workTime/10000).toFixed(1) : workTime}<span className={styles.standard}>{workTime>=10000 && '万'}h</span></div>
            <div className={styles.item_name}>开机时间</div>
          </div>
          <div className={styles.item} onClick={()=>{ window.alert('有效泵送率：统计范围内泵送计时/统计范围内开机时间') }}>
            <div className={styles.item_value} style={{ color: statistics.markers && statistics.markers.validPumpRatio ? '#F96F4E' : '#000' }}>{statistics.validPumpRatio||0}<span className={styles.standard}>%</span></div>
            <div className={styles.item_name}>有效泵送率<img src={require('../assets/img/question.png')} className={styles.icon_question} /></div>
          </div>
          <div className={styles.item} onClick={()=>{ window.alert('设备利用率：统计范围内有效工作时间（泵送时间+待料时间+转场时间）/统计范围内开机时间') }}>
            <div className={styles.item_value} style={{ color: statistics.markers && statistics.markers.useRatio ? '#F96F4E' : '#000' }}>{statistics.useRatio||0}<span className={styles.standard}>%</span></div>
            <div className={styles.item_name}>设备利用率<img src={require('../assets/img/question.png')} className={styles.icon_question} /></div>
          </div>
          <div className={styles.item}>
            <div className={styles.item_value} style={{ color: statistics.markers && statistics.markers.oilPerQuantity ? '#F96F4E' : '#000' }}>
              {oilPerQuantity[0]!=='NaN'?oilPerQuantity[0]:0}{oilPerQuantity[1] && '.'}{oilPerQuantity[1]}<span className={styles.standard}>{statistics.oilPerQuantity>=10000 && '万'}L/方</span></div>
            <div className={styles.item_name}>方量油耗</div>
          </div>
        </div>
      </div>
    )
  }
}


export default withRouter(Statistics)